<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<style>

    *{
        margin: 0;
        padding: 0;
    }

    ul{
        list-style: none;
        width: 30%;
        margin: 20px auto;
        
    }

    ul li{
        margin: 20px 0;
    }

    ul .list{
        margin-right: 10px;
    }

    ul .hot{
        float: right;
        background: rgb(226, 81, 81);
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

</style>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    let news = [
        {
            id:1,
            title:"创新引领 科技赋能",
            hot:"热",
            time:"2022-01-20"
        },
        {
            id:2,
            title:"义乌：主动报告后被判密接奖励五千",
            hot:"荐",
            time:"2022-10-20"
        },{
            id:3,
            title:"坚守三条控制线 服务高质量发展",
            hot:"热",
            time:"2022-11-20"
        },{
            id:4,
            title:"小猫开门让扫地机器人下27楼",
            hot:null,
            time:"2022-12-20"
        },{
            id:5,
            title:"俄方吊唁女王后 英方说“笔丢了”",
            hot:"火",
            time:"2022-09-21"
        },{
            id:634534,
            title:"龚俊向丰巢快递柜索赔101万",
            hot:null,
            time:"2022-09-22"
        },{
            id:7534534,
            title:"大部分四天工作制试点公司成功了",
            hot:null,
            time:"2022-09-23"
        },{
            id:8534534,
            title:"俄网友24小时直播灶台燃火",
            hot:"热",
            time:"2022-09-24"
        },{
            id:9,
            title:"姆巴佩拒绝出席法国队合影",
            hot:null,
            time:"2022-09-25"
        }
    ]


    //点击获取新闻数据
    function getNews(value){
        return ()=>{
           alert(value.title +"----"+value.time );
        }

    }


    let vdom = <ul>
        {
            news.map((item,index) =>{
                return  <li    key={item.id}>
                            <span className="list">{index+1}</span>
                            <span onClick={getNews(item)}  >{item.title}</span>
                            {
                                item.hot ?  <span className="hot">{item.hot}</span> : null
                            }
                              
                        </li>
                        
            })
        }
            
        
        </ul>

    //将虚拟dom转换为真实dom 渲染视图中  
    ReactDOM.render(vdom,document.getElementById("root"));

   
</script>
</html>